<template>
  <div class="left-container">
    <h2>Left</h2>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
export default {
  components: {
    ArtList
  },
  data() {
    return {
      age: 20
    }
  },
  // 第一个钩子函数
  beforeCreate() {
    console.log('beforeCreate', this.age)
  },
  // 第二个钩子函数
  create() {
    console.log('create', this.age)
  },
  // 第三个钩子函数
  beforeMount() {
    console.log('beforeMount', this.$refs.h2)
  },
  // 第四个钩子函数
  mounted() {
    console.log('mounted', this.$refs.h2)
  },
  // 第五个钩子函数
  beforeUpdate() {
    console.log('beforeUpdate', this.age, this.$refs.p.innerHTML)
  },
  // 第六个钩子函数
  updated() {
    console.log('updated', this.age, this.$refs.p.innerHTML)
  },
  // 第七个钩子函数
  beforeDestroy() {
    console.log('第7个', '组件即将被销毁')
    console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  },
  // 第八个钩子函数
  destroyed() {
    console.log('第8个', '组件已经被销毁')
    console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  },
  // 第九个钩子函数
  errorCaptured(err, vm, info) {
    console.log(err.message) // 输出错误描述信息
    console.log(vm) // 发生错误的组件 的实例对象
    console.log(info) // 也是一个描述信息
    return false // 阻止错误继续传播
  }
}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>